<template>
  <el-form class="form login">
    <div class="login_top">
      <a href="">
        <img alt="ico" src="../static/login/img/loginico.gif">
      </a>
    </div>
    <div class="login_center">
      <img alt="logo" src="../static/login/img/logo_day.jpg">
      <div style="margin-bottom:20px ">
        <span>账&nbsp;&nbsp;&nbsp;号：&nbsp;&nbsp;&nbsp;</span>
        <el-input v-model="user.username" class="input" type="text" name="username"
                  placeholder="请输入账号"></el-input>
      </div>
      <div style="margin-bottom:20px ">
        <span>密&nbsp;&nbsp;&nbsp;码：&nbsp;&nbsp;&nbsp;</span>
        <el-input placeholder="请输入密码" class="input" v-model="user.password" show-password></el-input>
      </div>
      <div style="margin-bottom:20px ">
        <span>验证码：&nbsp;&nbsp;</span>
        <el-input v-model="user.code" auto-complete="off" placeholder="验证码" style="width: 30%"
                  @keyup.enter.native="login">
        </el-input>
        <div class="login-code">
          <img :src="user.img" @click="getCaptchaImage"/>
        </div>
      </div>
    </div>
    <input id="loginBut" class="login_bottom" type="button" value="登录" @click="login">
  </el-form>
</template>
<script>
import * as login from "../api/login/login";

export default {
  components: {},
  props: {},
  data() {
    return {
      user: {
        username: '',
        password: '',
        img: '',
        uuid: '',
        code: ''
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    const self = this;
    self.setToken();
    self.getCaptchaImage()
  },
  mounted() {

  },
  methods: {
    setToken() {
      sessionStorage.setItem("token", "")
    },
    async login() {
      const self = this;
      let params = {
        username: self.user.username,
        password: self.user.password,
        uuid: self.user.uuid,
        code: self.user.code
      };
      let response = await self.$service.login.login(params);
      if (response.code === 200) {
        self.success("欢迎回来~");
        // 存储
        sessionStorage.setItem("token", response.result);
        await self.$router.push({path: '/index'})
      } else {
        self.error(response.message);
      }
    },
    async getCaptchaImage() {
      const self = this;
      let response = await self.$service.login.getCaptchaImage();
      self.user.img = 'data:image/gif;base64,' + response.result.img
      self.user.uuid = response.result.uuid;
    },
    async handleBoss() {
      const self = this;
      let params = {};
      let response = await self.$service.login.getBoss(params);
      console.log(response)
    },
    async handleLeader() {
      const self = this;
      let params = {};
      let leader = await self.$service.login.getLeader(params);
      console.log(leader)
    },
    async handleAdmin() {
      const self = this;
      let params = {};
      let admin = await self.$service.login.getAdmin(params);
      console.log(admin)
    },
    async handleUser() {
      const self = this;
      let params = {};
      let user = await self.$service.login.getUser(params);
      console.log(user)
    },
    success(massage) {
      this.$notify({
        title: '操作成功',
        message: massage,
        type: 'success',
        position: 'bottom-right'
      });
    },
    error(massage) {
      this.$notify({
        title: '操作失败',
        message: massage,
        type: 'error',
        position: 'bottom-right'
      });
    }
  }
}
</script>

<style>
.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

button {
  margin-top: 20px;
  width: 200px;
}

body {
  text-align: center;
  color: #7f7676;
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
}

.login {
  text-align: left;
  width: 520px;
  padding: 70px 20px 100px;
  margin: 0 auto;
  box-sizing: border-box;
}

.login_top > a > img {
  width: 120px;
  height: 40px;
  position: relative;
  left: 0;
  margin: 20px 0 40px 0;
}

.login_center {
  width: 480px;
  height: 525px;
  background-color: #fff;
  border-radius: 8px;
}

.login_center > img {
  width: 480px;
  height: 186px;
  border-radius: 8px;
}

.login_center > div > span {
  margin-left: 70px;
  text-align: right;
  line-height: 25px;
}

.login_center > div {
  position: relative;
  top: 30px;
}

.input {
  width: 260px;
  height: 30px;
}

#yzm {
  width: 138px;
  position: relative;
  left: 3px;
  position: relative;
}

.yzmimg {
  width: 112px;
  height: 44px;
  position: relative;
  top: 17px;
  left: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.login_bottom {
  width: 180px;
  height: 60px;
  background-color: #07b8e7;
  box-shadow: 0 10px 40px #7ae2fc;
  border-radius: 15px;
  position: relative;
  left: 0;
  top: -30px;
  border: none;
  font-size: 20px;
  line-height: 60px;
  text-align: center;
  color: #fff;
}

.checkdiv {
  margin-top: 10px;
  font-size: 12px;
}

.check {
  margin-left: 70px;
  cursor: pointer;
}

.a1 {
  position: relative;
  left: 178px;
  cursor: pointer;
}

.a2 {
  position: relative;
  left: 120px;
  cursor: pointer;
}

.login-code {
  width: 20%;
  height: 38px;
  display: inline-block;
}

img {
  cursor: pointer;
  vertical-align: middle;

}
</style>
